<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Demo</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
  	<link href="dist/cropper.css" rel="stylesheet">
  	<link href="css/main.css" rel="stylesheet">
</head>
<body>
  <div class="htmleaf-container">
    <h1> 将鼠标悬停至按钮，会提示如何在 js 中使用该功能 </h1>
    <!-- 按钮触发模态框 -->
    <!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      开始演示模态框
    </button>
    &lt;!&ndash; 模态框（Modal） &ndash;&gt;
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
              模态框（Modal）标题
            </h4>
          </div>
          <div class="modal-body">-->
            <!-- 模态框内容（Start）**************************************************** -->

            <div class="container">
              <div class="row">
                <div class="col-md-9">
                  <!-- <h3 class="page-header">示例:</h3> -->
                  <div class="img-container">
                    <img src="assets/img/picture.jpg" alt="图片">
                  </div>
                </div>
                <div class="col-md-3">
                  <!-- <h3 class="page-header">右侧四种预览大小:</h3> -->
                  <div class="docs-preview clearfix">
                    <div class="img-preview preview-lg"></div>
                    <div class="img-preview preview-md"></div>
                    <div class="img-preview preview-sm"></div>
                    <div class="img-preview preview-xs"></div>
                  </div>

                  <!-- <h3 class="page-header">所选数据:</h3> -->
                  <div class="docs-data">
                    <div class="input-group">
                      <label class="input-group-addon" for="dataX">横偏移量</label>
                      <input class="form-control" id="dataX" type="text" placeholder="x">
                      <span class="input-group-addon">像素</span>
                    </div>
                    <div class="input-group">
                      <label class="input-group-addon" for="dataY">纵偏移量</label>
                      <input class="form-control" id="dataY" type="text" placeholder="y">
                      <span class="input-group-addon">像素</span>
                    </div>
                    <div class="input-group">
                      <label class="input-group-addon" for="dataWidth">裁剪框宽</label>
                      <input class="form-control" id="dataWidth" type="text" placeholder="width">
                      <span class="input-group-addon">像素</span>
                    </div>
                    <div class="input-group">
                      <label class="input-group-addon" for="dataHeight">裁剪框高</label>
                      <input class="form-control" id="dataHeight" type="text" placeholder="height">
                      <span class="input-group-addon">像素</span>
                    </div>
                    <div class="input-group">
                      <label class="input-group-addon" for="dataRotate">旋转角度</label>
                      <input class="form-control" id="dataRotate" type="text" placeholder="rotate">
                      <span class="input-group-addon">°</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <!-- 图片下方的按钮 -->
                <div class="col-md-9 docs-buttons">
                  <!-- <h3 class="page-header">第一行左侧按钮组（移动，裁剪，放大，缩小，逆时针、顺时针旋转）:</h3> -->
                  <div class="btn-group">
                    <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                <span class="icon icon-move"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
                <span class="icon icon-crop"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
                <span class="icon icon-zoom-in"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
                <span class="icon icon-zoom-out"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -45)">
                <span class="icon icon-rotate-left"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 45)">
                <span class="icon icon-rotate-right"></span>
              </span>
                    </button>
                  </div>

                  <!-- <h3 class="page-header">第一行中间按钮组（锁定，解锁，清除剪切框，重置图片位置，从本地上传图片、清除所选区域内容）:</h3> -->
                  <div class="btn-group">
                    <button class="btn btn-primary" data-method="disable" type="button" title="Disable">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;disable&quot;)">
                <span class="icon icon-lock"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="enable" type="button" title="Enable">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;enable&quot;)">
                <span class="icon icon-unlock"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="clear" type="button" title="Clear">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
                <span class="icon icon-remove"></span>
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="reset" type="button" title="Reset">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;reset&quot;)">
                <span class="icon icon-refresh"></span>
              </span>
                    </button>
                    <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                      <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
                      <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
                <span class="icon icon-upload"></span>
              </span>
                    </label>
                    <button class="btn btn-primary" data-method="destroy" type="button" title="Destroy">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;destroy&quot;)">
                <span class="icon icon-off"></span>
              </span>
                    </button>
                  </div>

                  <!-- <h3 class="page-header">第一行右侧按钮组（显示所选区域：原大小，固定大小160*90， 固定大小320*180）:</h3> -->
                  <div class="btn-group btn-group-crop">
                    <button class="btn btn-primary" data-method="getCroppedCanvas" type="button">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;)">
                展示选择区域
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }" type="button">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 160, &quot;height&quot;: 90 })">
                160 &times; 90
              </span>
                    </button>
                    <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }" type="button">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCroppedCanvas&quot;, { &quot;width&quot;: 320, &quot;height&quot;: 180 })">
                320 &times; 180
              </span>
                    </button>
                  </div>

                  <!-- 展示所选区域图片时用到的模态框，上面三个按钮组的展示所用 -->
                  <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                          <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
                        </div>
                        <div class="modal-body"></div>
                        <!-- <div class="modal-footer">
                          <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
                        </div> -->
                      </div>
                    </div>
                  </div><!-- /.modal -->

                  <!-- 第二行按钮：获取、设置相应数据 （在下方input框展示或设置数据） -->

                  <!-- 获取数据--结果示例：{"x":127.99999999999994,"y":72,"width":1024,"height":576,"rotate":0}
                            （裁剪框对画布的偏移量）横向偏移，纵向偏移，裁剪框内实际像素的宽、高，旋转角度
                            即页面右侧所见数据
                   -->
                  <button class="btn btn-primary" data-method="getData" data-option="" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getData&quot;)">
              获取数据
            </span><!-- (坐标等) -->
                  </button>

                  <!-- 获取原图数据--结果示例：{"naturalWidth":720,"naturalHeight":1440,"aspectRatio":0.5,"rotate":0,"width":233,"height":466,"left":0,"top":0}
                            原始图片本来的 宽、高、宽高比率，旋转角度，在页面上展示的（css样式）宽、高
                   -->
                  <button class="btn btn-primary" data-method="getImageData" data-option="" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getImageData&quot;)">
              获取原图数据<!-- () -->
            </span>
                  </button>

                  <!-- 获取画布数据--结果示例：{"left":-182.9833244444447,"top":-129.42812000000018,"width":1213.9666488888895,"height":682.8562400000004}
                                画布（原始图片） 距最左侧xx像素，距最上xx像素，画布（原始图片）宽xx像素， 高xx像素
                       （改变该设置，可以改变原始图片的位置，大小）
                   -->
                  <button class="btn btn-primary" data-method="getCanvasData" data-option="" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCanvasData&quot;)">
              获取画布数据<!-- (原始图片的css参数) -->
            </span>
                  </button>

                  <!-- 获取画布数据--结果示例：{"left":-182.9833244444447,"top":-129.42812000000018,"width":1213.9666488888895,"height":682.8562400000004}
                                画布（原始图片） 距最左侧xx像素，距最上xx像素，画布（原始图片）宽xx像素， 高xx像素
                   -->
                  <button class="btn btn-primary" data-method="setCanvasData" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCanvasData&quot;, data)">
              设置画布数据<!-- (原始图片的css参数) -->
            </span>
                  </button>

                  <!-- 结果示例：{"left":86.11111111111113,"top":84.80000000000001,"width":339.20000000000005,"height":339.20000000000005}
                                裁剪框 距最左侧xx像素，距最上xx像素，裁剪框宽xx像素， 高xx像素
                         (改变该设置，可以改变裁剪框的位置，大小)
                   -->
                  <button class="btn btn-primary" data-method="getCropBoxData" data-option="" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;getCropBoxData&quot;)">
              获取裁剪框数据
            </span>
                  </button>

                  <!-- 使用示例：{"left":86.11111111111113,"top":84.80000000000001,"width":339.20000000000005,"height":339.20000000000005}
                                裁剪框 距最左侧xx像素，距最上xx像素，裁剪框宽xx像素， 高xx像素
                       注意：需要取消设置裁剪框比例限制，即任意， 该操作才会生效，否则无效。
                   -->
                  <button class="btn btn-primary" data-method="setCropBoxData" data-target="#putData" type="button">
            <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setCropBoxData&quot;, data)">
              设置裁剪框数据
            </span>
                  </button>
                  <input class="form-control" id="putData" type="text" placeholder="点击获取数据将放在这   或   根据该框的值设置数据">

                </div><!-- /.docs-buttons -->

                <!-- <h3 class="page-header">更改裁剪区域比例（16:9 4:3 1:1 2:3 不限制）:</h3> -->
                <div class="col-md-3 docs-toggles">
                  <div class="btn-group btn-group-justified" data-toggle="buttons">
                    <label class="btn btn-primary active" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
                      <input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
                      <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 16 / 9)">
                16:9
              </span>
                    </label>
                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
                      <input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
                      <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 4 / 3)">
                4:3
              </span>
                    </label>
                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
                      <input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
                      <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 1 / 1)">
                1:1
              </span>
                    </label>
                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
                      <input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
                      <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, 2 / 3)">
                2:3
              </span>
                    </label>
                    <label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
                      <input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
                      <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setAspectRatio&quot;, NaN)">
                任意
              </span>
                    </label>
                  </div>

                  <!-- 更改选项 -->
                  <div class="dropdown dropup docs-options">
                    <button class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" type="button" data-toggle="dropdown" aria-expanded="true">
                      更改选项
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="toggleOptions">
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="strict" checked>
                          严格
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="responsive" checked>
                          响应式
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="checkImageOrigin" checked>
                          检查图像源
                        </label>
                      </li>

                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="modal" checked>
                          模态框
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="guides" checked>
                          裁剪框显示网格线
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="highlight" checked>
                          高亮
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="background" checked>
                          背景
                        </label>
                      </li>

                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="autoCrop" checked>
                          自动裁剪
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="dragCrop" checked>
                          拖动裁剪
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="movable" checked>
                          可移动裁剪框
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="resizable" checked>
                          可改变裁剪框大小
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="rotatable" checked>
                          可旋转
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="zoomable" checked>
                          可缩放
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="touchDragZoom" checked>
                          允许触摸拖动缩放
                        </label>
                      </li>
                      <li role="presentation">
                        <label class="checkbox-inline">
                          <input type="checkbox" name="option" value="mouseWheelZoom" checked>
                          允许鼠标滚轮控制缩放
                        </label>
                      </li>
                    </ul>
                  </div><!-- /.dropdown -->
                </div><!-- /.docs-toggles -->
              </div>
            </div>
            <!-- 模态框内容（END）**************************************************** -->
          <!--</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary">
              提交更改
            </button>
          </div>
        </div>&lt;!&ndash; /.modal-content &ndash;&gt;
      </div>&lt;!&ndash; /.modal &ndash;&gt;
    </div>-->
    <!-- 按钮触发模态框 -->

    <!-- Content -->
    <!-- Alert -->
  </div>
	
	<script src="assets/js/jquery.min.js"></script>
	  <script src="assets/js/bootstrap.min.js"></script>
	  <script src="dist/cropper.js"></script>
	  <script src="js/main.js"></script>
</body>
</html>